<template>
	<view class="loginBox">
		<view class="titleTop" >
			
		</view>
		<view class="titleText" >
			住院预约
		</view>
		<view class="formBox" style="background-color: #fff;">
			<u--form
				:model="model1"
				:rules="rules"
				ref="uForm"
				labelWidth="160"
				:labelStyle='lstyle'
				>
				<u-form-item
					style="margin-bottom: 30upx;"
					label="姓名"
					prop="userInfo.hzxm"
					required
					borderBottom
					ref="item1">
						<u--input
							v-model="model1.userInfo.hzxm"
							placeholder="请输入姓名"
							border="none"
							clearable
						></u--input>
				</u-form-item>
				
				<u-form-item
				style="margin-bottom: 30upx;"
					label="身份证号"
					prop="userInfo.sfzh"
					borderBottom
					clearable
					ref="item1">
						<u--input
							v-model="model1.userInfo.sfzh"
							placeholder="请输入身份证号"
							border="none"
						>
						</u--input>
				</u-form-item>
				
				<u-form-item
				style="margin-bottom: 30upx;"
					label="电话"
					prop="userInfo.phone"
					required
					borderBottom
					clearable
					ref="item1">
						<u--input
							v-model="model1.userInfo.phone"
							placeholder="请输入电话"
							border="none"
						>
						</u--input>
				</u-form-item>
				
				<u-form-item
				style="margin-bottom: 30upx;"
					label="预约科室"
					prop="userInfo.bookDept"
					borderBottom
					
					clearable
					ref="item1">
						<uni-data-select
						      v-model="bookDeptId"
						      :localdata="rangeDept"
							  @change="changeDept"
						    ></uni-data-select>
				</u-form-item>
				
				
				<!-- <u-form-item
				style="margin-bottom: 30upx;"
					label="预约医生"
					prop="userInfo.bookDoc"
					borderBottom
					
					clearable
					ref="item1">
					<uni-data-select
					      v-model="model1.userInfo.bookDoc"
					      :localdata="rangeDoc"
						  @change="changeDoc"
					    ></uni-data-select>
						
				</u-form-item> -->
				
				
				
				
				<u-form-item
				style="margin-bottom: 30upx;"
					label="预约日期"
					prop="userInfo.bookDate"
					borderBottom
					required
					clearable
					ref="item1"
					@click="show = true"
					>
					<u--input
						v-model="model1.userInfo.bookDate"
						placeholder="请选择预约日期"
						border="none"
						suffixIcon="arrow-right"
						
					>
					</u--input>
				</u-form-item>
				
				<u-calendar :show="show" :mode="mode" @confirm="confirm" @close="show = false"></u-calendar>
				
				
				
			</u--form>
			
			<view class="notes">
				备注：<br>
				提交预约后，我们将及时和您取得联系，提供必要的咨询和帮助。
			</view>
			
			
			
			
		</view>
		<view class="btnBox">
			<button class="btn" @click="submit" type="default">提 交</button>
		</view>
		
	</view>
</template>

<script>
import {
	userReserve,
	getDeptListTj,
	getDocList
	} 
	from '@/api/login.js';
	import{
		formatDate,
	}from '@/utils/index.js'
export default {
	data() {
		return {
			show:false,
			rangeDept:[],
			rangeDoc:[],
			mode: 'single',
			value: '',
			bookDeptId:'',
			model1: {
				userInfo: {
					hzxm: '',
					sfzh:'',
					phone:'',
					bookDept:null,
					bookDoc:null,
					bookDate:'',
					bookType:1
				},
			},	
			rules: {
				'userInfo.hzxm': {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				
				/* 'userInfo.sfzh':[
					{
						type: 'string',
						required: true,
						message: '请填写身份证号',
						trigger: ['blur', 'change'],
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.idCard()就是返回true或者false的
							return uni.$u.test.idCard(value);
						},
						message: '请输入正确的身份证号',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}
				],
				
				'userInfo.phone': [
					{
						type: 'string',
						required: true,
						message: '请填写电话',
						trigger: ['blur', 'change']
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value);
						},
						message: '电话格式不正确',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}
					
				], */
				
				'userInfo.bookDate': {
					type: 'string',
					required: true,
					message: '请填写预约日期',
					trigger: ['blur', 'change']
				},
				
				
			},
			
		};
	},
	
	computed: {
	    lstyle() {
	      return {
	        fontWeight: 'bold',
			fontSize:'30upx'
	      }
		}
	},
	
	onShow() {
		this.getDept()
		
	},
	mounted(){
		
	},
	methods: {
		confirm(e) {
			this.model1.userInfo.bookDate = e[0];
			this.show = false;
			console.log(e[0]);
		},
		
		changeDept(e){
			if(e){
				const selectedOption = this.rangeDept.find(option => option.value === e);
				      if (selectedOption) {
				        this.model1.userInfo.bookDept = selectedOption.text;
				      }
					  console.log("e:", e,selectedOption);
				this.getDoc(e)
			}else{
				uni.$u.toast("请选择预约科室")
			}
			
			
			
		},
		
		changeDoc(e){
			const valueDoc = this.model1.userInfo.bookDoc;
			if(!valueDoc){
				uni.$u.toast("请先选择预约科室")
			}
			console.log("e:", valueDoc);
		},
		/* 查询预约科室 */
		getDept(){
			getDeptListTj({type:1}).then(res=>{
				const data =  res.retData;
				data.forEach((item)=>{
					const obj = {
						text:item.deptName,
						value:item.id
					}
					this.rangeDept.push(obj);
				})
				
				
			})
		},
		
		/* 查询预约医生 */
		getDoc(deptId){
			getDocList(deptId).then(res=>{
				this.rangeDoc = [];
				const dataDoc =  res.retData;
				dataDoc.forEach((item)=>{
					const objDoc = {
						text:item.docName,
						value:item.docName
					}
					this.rangeDoc.push(objDoc);
				})
				
				
			})
		},
		
					
		submit() {
			console.log(this.model1.userInfo);
			this.$refs.uForm.validate().then(res => {
				uni.showLoading({
					title:'加载中...',
				})
				const params = this.model1.userInfo;
				userReserve(params).then(res=>{
					uni.hideLoading()
					if(res.retCode == 'SUCCESS'){
						uni.$u.toast('预约登记成功，我们将及时和您联系!')
						/* uni.navigateTo({
							url:'/pages/hzReserveIndex/hzReserveIndex'
						}) */
						/* uni.navigateTo({
							url:'/pages/zgjyReportSucess/reportSuccess'
						}) */
					}else{
						uni.$u.toast(res.retMsg)
					}
					
					
				})
			}).catch(errors => {
				uni.$u.toast("请填写完成身份信息")
			})
		},
		change(value){
			const params = this.$utils.inputChange(this.model1.userInfo.cardNo)
			this.model1.userInfo.sex = params.sex;
		}
		 
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    	this.$refs.uForm.setRules(this.rules)
    },
};
</script>

<style scoped lang="scss">
::v-deep .uni-input-placeholder{
	color: #303133;
}
::v-deep .uni-select--disabled[data-v-6b64008e]{
	background-color: #fff !important;
}
.formBox{
	padding: 20upx;
	box-sizing: border-box;
	/* color: #FACF9B; */
	font-size: 30rpx;
	/* border: 4rpx solid #facf9b; */
	border-radius: 16rpx;
	margin: 20rpx 20rpx 0rpx 20rpx;
	/* max-height: 850rpx;
	overflow-y: auto; */
}
.btnBox{
		width: 100%;
		/* position: fixed; */
		margin-top: 100rpx;
		margin-bottom: 100rpx;
		height: 100upx;
		display: flex;
		align-items: center;
		
		justify-content: center;
		/* padding-bottom: 50upx; */
	}
.btn{
	padding-top: 5rpx;
	border-bottom-left-radius: 12rpx;
	color: #89d2be;
	font-weight: bold;
	letter-spacing: 6rpx !important;
	padding-left: 30rpx;
	font-size: 28rpx !important;
	padding-bottom: 5rpx;
	border-top-right-radius: 12rpx;
	background-color: #fff;
	box-shadow: 0rpx 2rpx 6rpx rgba(31, 31, 31, 0.16);
	overflow: hidden;
	border-top-left-radius: 12rpx;
	border-bottom-right-radius: 12rpx;
	text-align: center;
	padding-right: 30rpx;
}

  ::v-deep .u-form-item__body__left__content__label[data-v-067e4733]{
	font-weight: bold;
	font-size: 30upx;
}

::v-deep .content[data-v-5492554a] .u-form-item__body__left__content__label{
		font-weight: bold;
		font-size: 30upx;
	}
.notes{
	color: #403f3fe6;
	line-height: 2;
	font-size: 30upx;
}
::v-deep .uni-select[data-v-6b64008e]{
	border: none !important;
	border-bottom: none !important;
}

page {
	background-color: #89d2be;
	  /* background: url('/hd/static/img/index_bg.png') repeat-y center; */
	  /* overflow: hidden !important; */
	  height: 100%;
	  
	}
	@media (max-width: 600px) {
	  page {
	    background-size: 100% auto; /* 在小屏幕设备上调整背景图 */
		background-position: center; /* 背景图居中显示 */
	  }
	}
	.titleTop{
		width: 100%;
		height: 100rpx;
		/* background: url('/hd/static/img/indexBg_top.png') no-repeat center; */
		background-size: 100% 100%; /* 在小屏幕设备上调整背景图 */
	}
	.titleText{
		padding: 0rpx 0px 50rpx 0rpx;
		box-sizing: border-box;
		color: #fffbde;
			font-weight: bold;
			letter-spacing: 6rpx !important;
			font-size: 36rpx !important;
			font-style: italic;
			/* box-shadow: 0rpx 2rpx 6rpx rgba(31, 31, 31, 0.16); */
			text-shadow: 2px 2px 2px #333;
			overflow: hidden;
			text-align: center;
		
	}
	::v-deep .uni-input-placeholder{
		color: #6a6a6a !important;
	}
</style>
